<script setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "axios";
import { useI18n } from "vue-i18n";

import { useRoute } from "vue-router";

const route = useRoute();

const id = route.query.id;

const I18n = useI18n();
const { locale } = useI18n();

let activeName = ref("first");

// 修改当前模块
const handleClick = (val) => {};

// 多选
const handleSelectionChange = () => {};

// 用户名
const name = ref("");
const phone = ref("");
const email = ref("");

// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};

// 选择
const selItem = (id) => {
  const index = productList.value.findIndex((item) => item.id == id);
  productList.value[index].checked = !productList.value[index].checked;
};

// 分类1
let type1 = ref("");

// 分类2
let type2 = ref("");

// 需求备注
let LeaveMessage = ref("");

const categoryList = ref([]);
const nowCategory = ref({});
const getCategoryList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/category`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      categoryList.value = res.data.data;
      nowCategory.value = res.data.data[0];
      type1.value = categoryList.value[0].id;
    }
  } catch (e) {}
};

const productList = ref([]);
const getProductList = async () => {
  try {
    const res = await axios.get(
      `${apiUrl}/products?sid=${type2.value}&keyword=&priceOrder=&salesOrder=&news=0&page=1&limit=200&cid=${type1.value}&coupon_category_id=&productId=`,
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      productList.value = res.data.data;
      if (id) {
        selItem(parseInt(id));
      }
    }
  } catch (e) {}
};
const selectType1 = () => {
  nowCategory.value = categoryList.value.filter((item) => item.id === type1.value)[0];
  type2.value = null;
  getProductList();
};

const selectType2 = () => {
  getProductList();
};

const submit = async () => {
  const list = productList.value.filter((item) => item.checked);

  if (list.length === 0) {
    ElMessage({
      message: "请选择商品",
      type: "warning",
    });
    return;
  }
  if (LeaveMessage.value === "") {
    ElMessage({
      message: "请输入您的定制/询价需求",
      type: "warning",
    });
    return;
  }
  if (name.value === "") {
    ElMessage({
      message: "请输入姓名",
      type: "warning",
    });
    return;
  }

  if (phone.value === "") {
    ElMessage({
      message: "请输入联系方式",
      type: "warning",
    });
    return;
  }
  if (email.value === "") {
    ElMessage({
      message: "请输入邮箱",
      type: "warning",
    });
    return;
  }
  const info = JSON.parse(localStorage.getItem("info"));

  const data = {
    uid: info.uid,
    gid: 82,
    value: JSON.stringify({
      list: list,
      name: name.value,
      phone: phone.value,
      email: email.value,
      memo: LeaveMessage.value,
      status: 0,
      reply: "",
    }),
    add_time: Math.floor(Date.now() / 1000),
  };
  try {
    const res = await axios.post(`${apiUrl}/pc/insert_inquire_data`, data, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      ElMessage({
        message: "您的定制/询价需求已提交成功。",
        type: "success",
      });
      getInquiryList();
      name.value = "";
      phone.value = "";
      LeaveMessage.value = "";
      email.value = "";
      productList.value.forEach((item) => (item.checked = false));
    }
  } catch (e) {}
};

const list = ref([]);
const getInquiryList = async () => {
  const info = JSON.parse(localStorage.getItem("info"));
  const uid = info.uid;
  try {
    const res = await axios.post(
      `${apiUrl}/pc/get_inquire_list`,
      {
        uid,
        gid: 82,
      },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      list.value = res.data.data;
      list.value.forEach((item) => {
        item.value = JSON.parse(item.value);
      });
    }
  } catch (e) {
    console.log(e);
  }
};

onMounted(async () => {
  await getCategoryList();
  getProductList();
  getInquiryList();
});
</script>

<template>
  <div class="middle">
    <div class="topMenu">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="$t('inquiry.tab1')"
          name="first"
          v-if="JSON.stringify(nowCategory) !== '{}'"
        >
          <div class="searchBox">
            <div class="label">{{ $t("inquiry.searchLabel") }}</div>
            <div class="search">
              <el-select
                v-model="type1"
                style="width: 240px; margin-right: 10px"
                :placeholder="$t('inquiry.searchPlace1')"
                @change="selectType1"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.cate_name"
                  :value="item.id"
                />
              </el-select>

              <el-select
                v-model="type2"
                :placeholder="$t('inquiry.searchPlace2')"
                style="width: 240px"
                @change="selectType2"
              >
                <el-option
                  v-for="item in nowCategory.children"
                  :key="item.id"
                  :label="item.cate_name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>

          <div class="tableBox">
            <div class="productList">
              <div
                class="item"
                v-for="item in productList"
                :key="item.id"
                @click="selItem(item.id)"
              >
                <el-checkbox
                  v-model="item.checked"
                  class="checkProduct"
                  size="large"
                  @click="selItem(item.id)"
                />
                <div class="coverBox">
                  <img :src="item.image" alt="" />
                </div>
                <div class="productInfo">
                  <div class="name">
                    {{ locale === "zh-cn" ? item.store_name : item.en_store_name }}
                  </div>
                  <div class="price">￥{{ item.price }}/{{ $t("inquiry.unit") }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('inquiry.tab2')" name="second">
          <div class="tableBox">
            <el-table ref="orderList1" :data="list" style="width: 100%">
              <el-table-column property="order_id" :label="'姓名'"
                ><template #default="scope">{{
                  scope.row.value.name
                }}</template></el-table-column
              >
              <el-table-column property="order_id" :label="'电话'"
                ><template #default="scope">{{
                  scope.row.value.phone
                }}</template></el-table-column
              >
              <el-table-column property="order_id" :label="'邮箱'"
                ><template #default="scope">{{
                  scope.row.value.email
                }}</template></el-table-column
              >
              <el-table-column :label="$t('after.td2')" min-width="200">
                <template #default="scope">
                  <div
                    class="productBox"
                    v-for="(oitem, oindex) in scope.row.value.list"
                    :key="oindex"
                  >
                    <div
                      class="coverBox"
                      @click="jumpTo('/productDetail?id=' + oitem.id)"
                      style="cursor: pointer"
                    >
                      <img :src="oitem.image" />
                    </div>

                    <div
                      class="name"
                      @click="jumpTo('/productDetail?id=' + oitem.id)"
                      style="cursor: pointer"
                    >
                      {{ locale === "zh-cn" ? oitem.store_name : oitem.en_store_name }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="order_id" :label="'内容'"
                ><template #default="scope">{{
                  scope.row.value.memo
                }}</template></el-table-column
              >
              <el-table-column property="order_id" :label="'回复'"
                ><template #default="scope">{{
                  scope.row.value.reply
                }}</template></el-table-column
              >
              <el-table-column property="status" :label="'状态'"
                ><template #default="scope">{{
                  scope.row.value.status ? "已回复" : "未回复"
                }}</template></el-table-column
              >
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

  <div class="feedback">
    <div class="middle">
      <div class="leftBox">
        <div class="title">{{ $t("inquiry.bottomTitle1") }}</div>
        <div class="feedbackImgBox">
          <img :src="$t('inquiry.img')" alt="" />
        </div>
      </div>
      <div class="rightBox">
        <div class="inputBox">
          <div class="left">
            <el-input
              v-model="LeaveMessage"
              type="textarea"
              style="width: 370px"
              rows="8"
              :placeholder="$t('inquiry.xunjiaPlace')"
            />
          </div>

          <div class="right">
            <el-input
              v-model="name"
              class="bottomInput"
              style="width: 350px"
              :placeholder="$t('inquiry.namePlace')"
            />
            <el-input
              v-model="phone"
              class="bottomInput"
              style="width: 350px"
              :placeholder="$t('inquiry.phonePlace')"
            />
            <el-input
              v-model="email"
              class="bottomInput"
              style="width: 350px"
              :placeholder="$t('inquiry.emailPlace')"
            />

            <el-button
              type="primary"
              style="width: 100%; margin-top: 16px"
              @click="submit()"
              >{{ $t("inquiry.btn") }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topMenu {
  margin-top: 30px;
}

.searchBox {
  display: flex;
  margin-top: 15px;

  .label {
    line-height: 30px;
    margin-right: 20px;
  }
}

::v-deep .el-input__wrapper {
  border-radius: 0;
}

.productBox {
  display: flex;

  .coverBox {
    width: 50px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name {
    line-height: 50px;
    font-weight: bold;
  }
}

.tableBox {
  margin-top: 20px;
  margin-bottom: 30px;
}

.feedback {
  background-color: #f6f6f6;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;

  .middle {
    display: flex;
    padding: 36px 0;

    .title {
      font-size: 16px;
      font-weight: bold;
      margin-top: 40px;
      margin-bottom: 20px;
    }

    .leftBox {
      width: 490px;
      position: relative;

      // &::after {
      //     content: '';
      //     width: 1px;
      //     height: 170px;
      //     background-color: #dcdcdc;
      //     position: absolute;
      //     right: 0;
      //     top: 100px;
      // }

      .feedbackImgBox {
        width: 100%;
        margin: 30px 0;

        img {
          width: 100%;
        }
      }

      .desc {
        color: #666;
        font-size: 12px;
      }
    }

    .rightBox {
      width: 50%;
      padding-left: 100px;

      .title {
        margin-top: 70px;
      }
    }
  }
}

.inputBox {
  display: flex;
  margin-top: 50px;

  .left {
    margin-right: 30px;
  }
}

::v-deep .bottomInput .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 10px;
}

.productList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;

  .item {
    width: 325px;
    padding-bottom: 40px;
    cursor: pointer;
    transition: 0.5s all;
    position: relative;

    &:hover {
      box-shadow: 0px 0px 4px 1px #c5c5c54f;

      .promotionInfo {
        display: block;
      }

      .btnBox {
        display: flex;
      }
    }

    .coverBox {
      width: 200px;
      height: 200px;
      margin: 30px auto 20px auto;
      user-select: none;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .promotionInfo {
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px 10px;
      background-color: #156197;
      color: #fff;
      transition: 0.5s all;
    }

    .productInfo {
      margin-top: 10px;

      .name {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
      }

      .price {
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
      }
    }

    .btnBox {
      display: none;
      transition: 0.5s all;
      position: absolute;
      justify-content: center;
      width: 100%;
      margin-top: 10px;

      .btn {
        width: 35px;
        height: 35px;
        background-color: #fff;
        color: #000;
        border: 1px solid #000;
        border-radius: 35px;
        // line-height: 40px;
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:first-child {
          margin-right: 10px;
        }

        .el-icon {
          margin: auto;
        }

        &.isIn {
          background-color: #000;
          color: #fff;
          border: 1px solid #000;
        }
      }
    }
  }
}

.checkProduct {
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>
